<template>
  <div class="platform-ctx">
    <!-- <div v-if="info " class="ctx-item">
      <div class="_circle-remind">
        <div class="big-remind"></div>
        <div class="small-remind"></div>
        <div class="circle-remind">
          <div class="txt-remind">
            <countTo :startVal="startInfo.remindNum" :endVal="info.remindNum" :duration="5000" />
          </div>
          <div class="txt-remind-hint">提醒</div>
        </div>
      </div>
    </div> -->
    <!-- <div v-if="info" class="ctx-item">
      <div class="_circle-warning">
        <div class="big-warning"></div>
        <div class="small-warning"></div>
        <div class="circle-warning">
          <div class="txt-warning">
            <countTo :startVal="startInfo.warningNum" :endVal="info.warningNum" :duration="5000" />
          </div>
          <div class="txt-warning-hint">预警</div>
        </div>
      </div>
    </div> -->
 <!-- <div v-if="info" class="ctx-item">
      <div class="_circle-callPolicy">
        <div class="big-callPolicy"></div>
        <div class="small-callPolicy"></div>
        <div class="circle-callPolicy">
          <div class="txt-callPolicy">
            <countTo :startVal="startInfo.callPolicyNum" :endVal="info.callPolicyNum" />
          </div>
          <div class="txt-callPolicy-hint">报警</div>
        </div>
      </div>
    </div> -->
    <div v-if="info" class="ctx-item">
      <div>
          <!-- <div class="bg-yibiaopan bg-yibiaopan-smail"></div> -->
             <PieRoate class="bg-yibiaopan-smail" :info="info.warningNum"  :all="info.warningNum+info.callPolicyNum==0?'100':info.warningNum+info.callPolicyNum" :bgColor="'#e18c29'"/>
          <div class="number">
            <countTo :startVal="startInfo.warningNum" :endVal="info.warningNum"  :duration="5000" />
           <div class="txt-warning-hint">预警</div>
          </div> 
      </div>   
    </div>
    <div v-if="info" class="ctx-item">
      <div>
          <PieRoate class="bg-yibiaopan" :info="info.callPolicyNum" :all="info.warningNum+info.callPolicyNum==0?100:info.warningNum+info.callPolicyNum" :bgColor="'#d8411d'"/>
          <div class="number2">
             <countTo  :startVal="startInfo.callPolicyNum" :endVal="info.callPolicyNum" />
          <div class="txt-callPolicy-hint">报警</div>
          </div> 
      </div>   
    </div>
    <!-- <div v-if="info" class="ctx-item">
      <div>
          <div class="bg-yibiaopan"></div>
          <div class="number2">
             <countTo  :startVal="startInfo.callPolicyNum" :endVal="info.callPolicyNum" />
          <div class="txt-callPolicy-hint">报警</div> 
          </div> 
      </div>   
    </div> -->
  </div>
</template>

<script>
import { GetWeightKeyRemind } from "@/api/screenApi";
import PieRoate from "@/components/charts/pieRoate";
import countTo from "vue-count-to";
export default {
  name: "Reminder",
  components: {
    countTo,
    PieRoate
  },
  data() {
    return {
      info: null,
      startInfo: {
        remindNum: 0,
        warningNum: 0,
        callPolicyNum: 0,
      },
    };
  },
  props: {
    stationId:{
      type: [String,Number]
    },
    areaCode:{
      type:String, 
      default:""
    }
  },
  created() {
    this.GetInfo();
  },
  mounted() {
    this.InterVal = setInterval(() => {
      this.startInfo = this.info;
      this.GetInfo();
    }, 20000);
  },
  destroyed() {
    this.InterVal ? clearInterval(this.InterVal) : null;
  },
  watch: {
    'stationId'(){
      this.GetInfo()
    },
    'areaCode'(){
      this.GetInfo()
    }
  },
  methods: {
    //获取list
    async GetInfo() {
      try {
        let params = {
          areaCode:this.areaCode,
          stationId:this.stationId
        }
        let obj = await GetWeightKeyRemind(params);
        let info =  {
          remindNum:Number(obj.remindNum),
          warningNum:Number(obj.warningNum),
          callPolicyNum:Number(obj.callPolicyNum)
        }
        this.info = info
      } catch (err) {
        // eslint-disable-next-line no-console
        console.log(err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.platform-ctx {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  .ctx-item {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    overflow:hidden;
    
    .bg-yibiaopan{
      width:120px;
      height:120px;
      display:flex;
      justify-content: center;
      //  background:url('../../assets/images/yujing1.png');
      // background-size:100% 100%;
      span{
       color:#d8411d
      }
      
    }
    .bg-yibiaopan-smail{
      margin-top:20px;
      //   background:url('../../assets/images/yujing2.png');
      // background-size:100% 100%;
      width:100px;
      height:100px;
      display:flex;
      justify-content: center;
      span{
      color:#e18b29;
      }
    }
    // @media screen and (min-width: 1920px){
    //    .bg-yibiaopan{
    //   width:150px;
    //   height:120px;
    // }
    //    .bg-yibiaopan-smail{
    //   margin-top:20px;
    //   //   background:url('../../assets/images/yujing2.png');
    //   // background-size:100% 100%;
    //    width:130px;
    //    height:100px;
    // }
    // }
    .number{
        font-size: 20px;
      color: rgb(225, 139, 41);
    }
    .number2{
        font-size: 20px;
      color: #d8411d;
    }
    ._circle-remind {
      position: relative;
      box-sizing: border-box;
    }
    .big-remind {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      position: absolute;
      margin: auto;
      /*以下五个属性为水平垂直居中的方法*/
      box-sizing: border-box;
    }
    .small-remind {
      width: 82px;
      height: 82px;
      border: 2px solid #9ddbe8;
      border-radius: 50%;
      position: absolute;
      margin: auto;
      /*以下五个属性为水平垂直居中的方法*/
      box-sizing: border-box;
      border-left-color: transparent;
      border-top-color: transparent;
    }
    .circle-remind {
      position: relative;
      width: 100px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      text-align: center;
      border-radius: 50%;
      background-color: transparent;
      border: 1px solid rgba(111, 178, 255, 0.5);
    }
    .txt-remind {
      font-size: 24px;
      color: rgb(111, 178, 255);
    }
    .txt-remind-hint {
      margin-top: 0.1rem;
      font-size: 14px;
      color: rgb(111, 178, 255);
    }
    ._circle-warning {
      position: relative;
      box-sizing: border-box;
    }
    .big-warning {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      position: absolute;
      margin: auto;
      /*以下五个属性为水平垂直居中的方法*/
      box-sizing: border-box;
      // background:url('../../assets/images/yujing.png');
      // background-size:100% 100%;
    }
    .small-warning {
      width: 82px;
      height: 82px;
      // border: 2px solid rgb(225, 139, 41);
      border-radius: 50%;
      position: absolute;
      margin: auto;
      /*以下五个属性为水平垂直居中的方法*/
      box-sizing: border-box;
      // border-left-color: transparent;
      // border-top-color: transparent;
    }
    .circle-warning {
      position: relative;
      width: 80px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      border-radius: 50%;
      text-align: center;
      // background-color: transparent;
      // border: 1px solid rgb(225, 139, 41, 0.5);
    }
    .txt-warning {
      font-size: 24px;
      color: rgb(225, 139, 41);
    }
    .txt-warning-hint {
      margin-top: 0.1rem;
      font-size: 14px;
      color: rgb(225, 139, 41);
    }
    ._circle-callPolicy {
      position: relative;
      box-sizing: border-box;
    }
    .big-callPolicy {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      position: absolute;
      margin: auto;
      /*以下五个属性为水平垂直居中的方法*/
      box-sizing: border-box;
    }
    .small-callPolicy {
      width: 82px;
      height: 82px;
      border: 2px solid rgb(216, 65, 29);
      border-radius: 50%;
      position: absolute;
      margin: auto;
      /*以下五个属性为水平垂直居中的方法*/
      box-sizing: border-box;
      border-left-color: transparent;
      border-top-color: transparent;
    }
    .circle-callPolicy {
      position: relative;
      width: 80px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      border-radius: 50%;
      text-align: center;
      background-color: transparent;
      border: 1px solid rgb(216, 65, 29, 0.5);
    }
    .txt-callPolicy {
      font-size: 24px;
      color: rgb(216, 65, 29);
    }
    .txt-callPolicy-hint {
      margin-top: 0.1rem;
      font-size: 14px;
      color: rgb(216, 65, 29);
    }
  }
}
</style>
